<template>
  <div class="common-modal-warp">
    <Modal
      :class="classNames"
      v-model="config"
      @on-cancel="cancelEvent"
      :mask-closable="false"
      footer-hide
      :title="title"
      :width="width"
    >
      <div class="modal-main">
        <template v-if="$slots.content">
          <slot name="content"></slot>
        </template>
        <div v-else class="f-16 c-black modal-text">{{ content }}</div>
        <div v-if="isSMS" class="sms-box">
          <div class="flx-row-s-c div-line">
            <div class="long-name">手机号码</div>
            <span class="c-black f-14" style="width: 100px">{{ mobile }}</span>
            <div
              class="user-normal-button form-button-size"
              style="margin-left: 10px"
              @click="getCodeEvent"
            >
              {{ senCodeText }}
            </div>
            <span class="f-g f-14" style="margin-left: 10px"
              >若手机号已停用无法收到短信，请联系在线客服!</span
            >
          </div>
          <div class="flx-row-s-c div-line long-name-nece">
            <div class="long-name">短信验证码</div>
            <Input v-model.trim="smsCode" style="width: 100px" />
          </div>
        </div>
        <div class="flx-row-c-c" v-if="!hideConfirm && !hideCancel" style="margin-top: 30px">
          <template v-if="$slots.confirm">
            <div class="confirm-btn" @click="confirmEvent">
              <slot name="confirm"></slot>
            </div>
          </template>
          <div
            v-else-if="!$slots.confirm && !hideConfirm"
            class="big-button-size user-strong-button"
            style="margin-right: 50px"
            @click="confirmEvent"
          >
            确定
          </div>
          <template v-if="$slots.cancel">
            <div class="cancel-btn">
              <slot name="cancel"></slot>
            </div>
          </template>
          <div
            v-else-if="!$slots.cancel && !hideCancel"
            class="big-button-size user-normal-button"
            @click="cancelEvent"
          >
            取消
          </div>
        </div>
        <Lodding :loading="showLoading" />
      </div>
    </Modal>
  </div>
</template>
<script>
import Lodding from "_c/spin/loading";
import { sendCode } from "@/api/user";
export default {
  name: "commonModalWarp",
  components: {
    Lodding,
  },
  props: {
    // modal状态
    show: {
      type: Boolean,
      default: false,
    },
    // 简单标题
    title: {
      type: String,
      default: "提示",
    },
    content: {
      type: String,
      default: "内容",
    },
    // loading遮罩层状态
    loading: {
      type: Boolean,
      default: false,
    },
    // 是否开启loading遮罩层
    isMask: {
      type: Boolean,
      default: true,
    },
    hideConfirm: {
      type: Boolean,
      default: false,
    },
    hideCancel: {
      type: Boolean,
      default: false,
    },
    width: {
      type: Number,
      default: 520,
    },
    className: {
      type: String,
      default: "",
    },
    isSMS: {
      // 是否打开短信模块
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      senCodeText: "获取短信验证码",
      isSendCode: false,
      smsCode: "",
      fullscreen: false,
    };
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
    showLoading: {
      get() {
        return this.loading;
      },
      set(val) {
        this.$emit("update:loading", val);
      },
    },
    classNames() {
      return !this.className ? "modal-tips" : `modal-tips ${this.className}`;
    },
    mobile() {
      return this.$store.state.user.mobile;
    },
  },
  methods: {
    cancelEvent() {
      this.$emit("cancelEvent");
    },
    confirmEvent() {
      if (this.isSMS && !this.smsCode) {
        this.$Message.warning("请输入验证码！");
        return false;
      }
      this.isMask && (this.showLoading = true);
      this.isSMS && this.$emit("confirmEvent", this.smsCode);
      !this.isSMS && this.$emit("confirmEvent");
    },
    // 获取短信验证吗
    async getCodeEvent() {
      if (!this.isSendCode) {
        let count = 60;
        this.isSendCode = true;
        this.showLoading = true;
        const { code } = await sendCode();
        this.showLoading = false;
        if (code === 200) {
          this.smsInterval = setInterval(() => {
            count -= 1;
            this.senCodeText = `${count}s后重新发送`;
            if (count === 0) {
              this.isSendCode = false;
              this.senCodeText = "重新发送";
              this.smsInterval && clearInterval(this.smsInterval);
            }
          }, 1000);
        } else {
          this.isSendCode = false;
        }
      }
    },
    cleanCode() {
      this.smsCode = "";
      this.isSendCode = false;
      this.senCodeText = "获取短信验证码";
      this.smsInterval && clearInterval(this.smsInterval);
    },
  },
};
</script>
<style lang="scss" scoped>
.common-modal-warp {
  position: relative;
}
.long-name /deep/ {
  min-width: 130px;
  text-align: right;
  margin-right: 20px;
}
.modal-main {
  position: relative;
  padding: 30px 40px 50px;
}
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.loadding-modal /deep/ {
  .ivu-modal {
    height: 100vh;
    background-color: transparent;
    .ivu-modal-body {
      position: relative;
    }
    .ivu-modal-content,
    .ivu-modal-body,
    .ivu-spin-fix {
      height: inherit;
      background-color: transparent;
    }
  }
}
</style>
<style lang="scss" scoped>
.loader {
  width: 60px;
  height: 60px;
  position: relative;
  margin: 0 auto;
  .circular {
    animation: rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  svg:not(:root) {
    overflow: hidden;
  }
  .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes color {
  0%,
  100% {
    stroke: #fc461e;
  }
  //   0%,
  //   100% {
  //     stroke: #d62d20;
  //   }
  //   40% {
  //     stroke: #0057e7;
  //   }
  //   66% {
  //     stroke: #008744;
  //   }
  //   80%,
  //   90% {
  //     stroke: #ffa700;
  //   }
}
</style>
<style lang="scss" scoped>
.select-domain-modal /deep/ {
  .modal-main {
    padding: 0px 30px 30px 30px;
  }
}
</style>
